<!--
* description: 创建到货单
-->
<template>
  <div class="app-container app-container-table">
    <div class="filter-container filter-params">
      <el-row :gutter="34" style="margin-bottom:5px;">
        <el-col :span="24">
          <div class="dialogTitle">
            <span class="dialogTitleSpan">主单信息</span>
          </div>
        </el-col>
      </el-row>
      <el-row :gutter="26">
        <el-col :span="24">
          <component
            v-for="comp in tableComponents.filter(o => o.isMust === true)"
            :ref="comp.isRequire ? comp.isRequire + comp.compKey : comp.compKey"
            :validrule="comp.validrule"
            :key="comp.compKey"
            :codeField="comp.codeField"
            :textField="comp.textField"
            :popupsKey="comp.compKey"
            :is="comp.component"
            :code="formField[comp.codeField]"
            :text="formField[comp.textField]"
            @changeCode="getComponentCode"
            @focusCode="getFocusCode"
            :disabled="comp.disabled"
            :isRequire="comp.isRequire"
            :span="comp.span || 8"
            :options="comp.options"
            :isMul="comp.isMul"
            :labelName="comp.labelName"
            :lookuptype="comp.lookuptype"
            :dateOptionsType="comp.dateOptionsType"
            :readonly="comp.readonly"
          ></component>
        </el-col>
      </el-row>
      <el-row :gutter="34" style="margin-bottom:5px;">
        <el-col :span="24">
          <div class="dialogTitle">
            <span class="dialogTitleSpan">明细信息</span>
            <div style="display:flex;">
              <span class="dialogTitleButton">
                <el-button class="iconfont icon-newlyAdded" @click="tableDataAdd">新增明细行</el-button>
              </span>

              <span class="dialogTitleButton" style="margin-left:5px">
                <el-button @click="tableDataSave">整单保存</el-button>
              </span>
            </div>
          </div>
        </el-col>
      </el-row>
      <!-- 表格 -->
      <el-row :gutter="34" style="margin-bottom:5px;">
        <el-col :span="24">
          <el-table
            :data="tableData"
            style="width: 100%"
            :cell-class-name="columnClass"
            :height="tableHeight"
            ref="table"
          >
            <el-table-column label="操作" width="80" align="center">
              <template slot-scope="scope">
                <el-button size="mini" type="danger" @click="tableDataDel(scope.$index)">删除</el-button>
              </template>
            </el-table-column>
            <el-table-column label="序号" width="60" align="center">
              <template slot-scope="scope">
                <span>{{ scope.$index + 1 }}</span>
              </template>
            </el-table-column>
            <el-table-column label="备件编号" align="center">
              <template slot-scope="scope">
                <Xinputs
                  :rowData="{}"
                  :SUPPLIER_CODE="formField.SUPPLIER_CODE"
                  :PartNo="scope.row.PART_NO"
                  @checkPartDataRow="onChanges"
                  :rowIndex="scope.$index"
                  :isMul="false"
                  ref="tablePartInput"
                ></Xinputs>
              </template>
            </el-table-column>
            <el-table-column label="备件名称" align="center">
              <template slot-scope="scope">
                <span>{{ scope.row.PART_NAME }}</span>
              </template>
            </el-table-column>
            <el-table-column label="关联单号" align="center">
              <template slot-scope="scope">
                <el-input v-model="scope.row.RELATION_CODE" style="width:100%;" maxlength="50"></el-input>
              </template>
            </el-table-column>
            <el-table-column label="关联单行号" align="center">
              <template slot-scope="scope">
                <el-input v-model="scope.row.RELATION_LINE_CODE" style="width:100%;" maxlength="50"></el-input>
              </template>
            </el-table-column>
            <el-table-column label="采购SNP" align="center">
              <template slot-scope="scope">
                <span>{{ scope.row.SNP_IN }}</span>
              </template>
            </el-table-column>
            <el-table-column label="交货数量" align="center">
              <template slot-scope="scope">
                <el-input v-model="scope.row.ARRIVAL_QTY" style="width:100%;"></el-input>
              </template>
            </el-table-column>
            <el-table-column label="备注" align="center">
              <template slot-scope="scope">
                <el-input v-model="scope.row.REMARK_D" style="width:100%;"></el-input>
              </template>
            </el-table-column>
          </el-table>
        </el-col>
      </el-row>
      <!-- 表格 -->
    </div>
    <div slot="footer" class="dialog-footer">
      <!-- <el-button
        v-for="comp in tableButtons"
        :key="comp.compKey"
        :type="comp.type"
        @click="comp.clickEvent"
      >{{comp.text}}</el-button>-->
    </div>
  </div>
</template>
<script>
import { formMixins } from "@/components/wms/mixins/formMixins";
import { wmsApis } from "@/api/wms/baseData/api";
import request from "@/utils/request";
export default {
  name: "createOrder",
  // 组件混入对象
  components: {
    Xinputs: () =>
      import("@/components/wms/wmsEjectWindows/wmsTableInputPartInfo")
  },
  mixins: [formMixins],
  watch: {
    $route(val) {
      if (
        this.formField.pageId !== "" &&
        this.$route.query.pageId !== undefined &&
        this.$route.query.pageId !== this.formField.pageId
      ) {
        this.formField.pageId = this.$route.query.pageId;
        this.formField.pageName = this.$route.query.pageName;
        // this.queryTable();
      }
    }
  },
  created() {
    this.dropdownList();
    if (this.$route.query != null) {
      // 判断传入query参数，初始化数据
      if (this.$route.query.pageId != null && this.$route.query.pageId !== "") {
        this.formField.pageId = this.$route.query.pageId;
        this.formField.pageName = this.$route.query.pageName;
      }
    }
  },
  mounted() {
    // 设置网格高度自适应
    window.addEventListener("resize", () => {
      this.setTableHeight();
    });
    // this.queryTable();
  },
  updated() {
    const that = this;
    that.$nextTick(() => {
      that.setTableHeight();
    });
  },
  data() {
    return {
      // 动态组件-按钮
      tableButtons: [],
      // 动态组件-查询条件
      tableComponents: [
        {
          compKey: "compKey1",
          labelName: "仓库名称", //仓库名称
          codeField: "WAREHOUSE_ID",
          component: () => import("@/components/wms/dropdownList/dropdownList"),
          type: "dropdownList",
          isMust: true,
          isMul: false,
          options: [],
          isRequire: true
        },
        {
          compKey: "compKey2",
          labelName: "收货类型", //收货类型
          codeField: "ARRIVAL_TYPE",
          lookuptype: "PRO0004",
          component: () => import("@/components/wms/dropdownList/dropdownList"),
          type: "dropdownList",
          isMust: true,
          isMul: false,
          options: [],
          isRequire: true
        },
        {
          compKey: "compKey3",
          labelName: "计划发货日期", //计划发货日期
          codeField: "DELIVERY_TIME",
          component: () => import("@/components/org/datePicker/datePicker"),
          type: "date",
          isMust: true,
          isRequire: true
        },
        {
          compKey: "compKey5",
          labelName: "合作伙伴编号",
          textField: "SUPPLIER_CODE",
          codeField: "SUPPLIER_CODE",
          isRequire: true,
          component: () =>
            import("@/components/wms/wmsEjectWindows/wmsContractInfo"),
          type: "propus",
          isMust: true,
          isMul: false,
          returnCodeField: "SUPPLIER_CODE",
          returnTextField: "PARTNER_SHORT_NAME",
          changed: e => {
            this.tableData = [];
            this.$nextTick(() => {
              this.tableData.push({
                PART_NO: "",
                RELATION_CODE: "",
                RELATION_LINE_CODE: "",
                ARRIVAL_QTY: "",
                REMARK_D: "",
                PART_NAME: "",
                SNP_IN: ""
              });
            });
            this.formField.SUPPLIER_CODE = e.SUPPLIER_CODE;
            this.formField.PARTNER_SHORT_NAME = e.PARTNER_SHORT_NAME;
            this.formField.REMARK = "";
          }
        },
        {
          compKey: "compKey4",
          labelName: "合作伙伴名称", //合作伙伴编号
          codeField: "PARTNER_SHORT_NAME",
          component: () => import("@/components/wms/commonInput"),
          type: "inputText",
          isMust: true,
          disabled: true,
          isRequire: true
        },
        {
          compKey: "compKey6",
          labelName: "紧急标识", //紧急标识
          codeField: "IS_URGENCY",
          lookuptype: "PRO0004",
          component: () => import("@/components/wms/dropdownList/dropdownList"),
          type: "dropdownList",
          isMust: true,
          isMul: false,
          isRequire: true,
          options: [
            {
              label: "普通",
              value: "0"
            },
            {
              label: "紧急",
              value: "1"
            }
          ]
        },
        {
          compKey: "compKey12",
          labelName: "备注",
          span: 24,
          codeField: "REMARK",
          component: () => import("@/components/wms/textareaInput"),
          isMust: true,
          isRequire: true
        }
      ],
      //表单查询数据
      formField: {
        WAREHOUSE_ID: "",
        ARRIVAL_TYPE: "",
        DELIVERY_TIME: "",
        SUPPLIER_CODE: "",
        PARTNER_SHORT_NAME: "",
        IS_URGENCY: "",
        REMARK: ""
      },
      //表格数据
      tableData: [
        {
          PART_NO: "",
          RELATION_CODE: "",
          RELATION_LINE_CODE: "",
          ARRIVAL_QTY: "",
          REMARK_D: "",
          PART_NAME: "",
          SNP_IN: ""
        }
      ],
      tableHeight: 50,
      PART_NO: ""
    };
  },
  methods: {
    dropdownList() {
      request({
        url: "/mp/wm/vl/basedata/warehouseuser/queryUserByWHBox.do",
        method: "post",
        data: {
          IS_ENABLE: "1"
        }
      }).then(res => {
        res.listRow.map(item => {
          this.tableComponents[0].options.push({
            label: item.WAREHOUSE_NAME,
            value: item.WAREHOUSE_ID
          });
        });
        // this.formField.WAREHOUSE_IDS = res.listRow[0].WAREHOUSE_ID;
      });
      request({
        url: "/mp/wm/vl/warehouse/arrival/queryArrivalType.do",
        method: "post",
        data: {}
      }).then(res => {
        res.listRow.map(item => {
          this.tableComponents[1].options.push({
            label: item.ARRIVAL_NAME,
            value: item.ARRIVAL_TYPE
          });
        });
      });
    },
    columnClass(row, rowIndex) {
      return "table_column";
    },
    onChanges(val, valIndex) {
      for (var index in this.tableData) {
        if (valIndex == index) {
          this.tableData[index].PART_NAME = val.PART_NAME;
          this.tableData[index].SNP_IN = val.SNP_IN;
          this.tableData[index].PART_NO = val.PART_NO;
        }
      }
    },
    // 预计到货数量change事件
    numChange(index) {
      if (this.tableData[index].num < 1) {
        this.tableData[index].num = 1;
      }
      let tmpObj = this.tableData[index];
      this.$set(this.tableData, index, tmpObj);
    },
    // 新增按钮 点击事件
    tableDataAdd() {
      this.tableData.push({
        PART_NO: "",
        RELATION_CODE: "",
        RELATION_LINE_CODE: "",
        ARRIVAL_QTY: "",
        REMARK_D: "",
        PART_NAME: "",
        SNP_IN: ""
      });
    },
    //  删除按钮 点击事件
    tableDataDel(index) {
      this.$confirm("您确定是否要进行此操作？", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        center: true
      })
        .then(() => {
          this.tableData.splice(index, 1);
          this.$message({
            type: "success",
            message: "删除成功!"
          });
        })
        .catch(() => {});
    },
    //保存
    tableDataSave() {
      this.$utils.validataMoth(this, "validpopup");
      if (this.valid) {
        if (this.tableData.length === 0) {
          this.$message({
            message: "创建到货单至少有一条明细才能保存"
          });
          return;
        }
        request({
          url: "/mp/wm/vl/warehouse/arrival/insertarrival.do",
          method: "post",
          data: {
            ArrivalD: this.tableData,
            WAREHOUSE_ID: this.formField.WAREHOUSE_ID,
            ARRIVAL_TYPE: this.formField.ARRIVAL_TYPE,
            DELIVERY_TIME: this.formField.DELIVERY_TIME,
            SUPPLIER_CODE: this.formField.SUPPLIER_CODE,
            IS_URGENCY: this.formField.IS_URGENCY,
            REMARK: this.formField.REMARK
          }
        }).then(res => {
          if (res.result === "0") {
            this.$message({
              type: "success",
              message: res.msg
            });
          } else {
            this.$message({
              type: "success",
              message: "保存成功!"
            });
            this.tableData = [
              {
                PART_NO: "",
                RELATION_CODE: "",
                RELATION_LINE_CODE: "",
                ARRIVAL_QTY: "",
                REMARK_D: "",
                PART_NAME: "",
                SNP_IN: ""
              }
            ];
            this.formField = {
              WAREHOUSE_ID: "",
              ARRIVAL_TYPE: "",
              DELIVERY_TIME: "",
              SUPPLIER_CODE: "",
              PARTNER_SHORT_NAME: "",
              IS_URGENCY: "",
              REMARK: ""
            };
          }
        });
      }
    },
    // 设置网格高度
    setTableHeight() {
      var that = this;
      that.$nextTick(function() {
        that.tableHeight =
          window.innerHeight -
          this.getElementToPageTop(that.$refs.table.$el) -
          40;
      });
    },
    getElementToPageTop(el) {
      if (el.parentElement) {
        return this.getElementToPageTop(el.parentElement) + el.offsetTop;
      }
      return el.offsetTop;
    }
  }
};
</script>
<style type="text/css" scoped>
.dialogTitle {
  text-align: left;
  padding: 10px 0;
  display: flex;
  justify-content: space-between;
}
.dialogTitleSpan {
  font-size: 16px;
  display: inline-block;
  font-weight: 600;
}
.table_column {
  padding: 5px !important;
}
</style>
